<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件浏览</title>
    <link rel="stylesheet" href="css/normalize.min.css">
    <!--<script src="js/pace.min.js"></script>-->
    <!--<link href="css/pace-theme-flash.min.css" rel="stylesheet" />-->
    <link rel="stylesheet" href="css/style.css">
    .
    <!--避免IE使用兼容模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
<sapn>test</sapn>
    <center>
        <button class='button button1'  onclick='backPage()'>返回上一级</button>
        <video autoplay></video>
    </center>
    <div nowrap class="white-space:nowrap;" id="parten">
    </div>
</body>

<script type="text/javascript" src="jquery.js"></script>
<script>
    window.onload = function(){
        this.get();
    }
    var fileList = [file,file];
    var file = {"name":"","type":"","imageUrl":""};
    var lastPage = '';
    function backPage() {
        if (lastPage!=null && lastPage != '' && lastPage != undefined ){
            lastPage =  lastPage.substr(0,lastPage.lastIndexOf("_"));
        }
        get(lastPage);
    }
    function get(filePath){
        lastPage = filePath;
        $("#parten").empty();
        var url = "http://127.0.0.1:8080/file/folder/list";
        if(filePath != 'undefined' && filePath != '' && filePath != null){
            url = url+"?filePath="+filePath;
        }
        $.get(url,function(result){
            var str="";
            fileList = result;
            for(i = 0 ; i < fileList.length; i++ ){
                nowFile = fileList[i];
                var foladerNmae = nowFile.name;
                if (foladerNmae.lastIndexOf("_") > 0){
                    foladerNmae = foladerNmae.substr(foladerNmae.lastIndexOf("_")+1,foladerNmae.length)
                }
                if(nowFile.type=='folder'){
                    str +="<div class='float:left;' onclick=\"get('"+nowFile.absolutePath+"')\" ><img width='80px' " +
                        "height='80px' src='folder.png'><br><span>&nbsp "+foladerNmae+"</span></div>"
                }
                if(nowFile.type=='video'){
                str +="<div class='float:left;' onclick=\"getVideo('"+nowFile.absolutePath+"')\"><img width='80px' height='80px' src='"+"http://127.0.0.1:8080/file/image?fileName="+nowFile.absolutePath+"'><br>" +
                    "&nbsp "+ foladerNmae
                    +"</span></div>"
                }
                if(nowFile.file){
                    str +="<div class='float:left;'><img width='80px' height='80px' src='"+"http://127.0.0.1:8080/file/image?fileName="+nowFile.absolutePath+"'><br>" +
                        "&nbsp "+ foladerNmae
                        +"</span></div>"
                }
            }
            $("#parten").append(str);
        });
    }

    function getVideo(imageUrl) {
        var url = 'http://127.0.0.1:8080/static/html/paly.html?fileName='+imageUrl;
        window.open(url);
    }

</script>

<style>
    div{
        display: inline-block;
    }
    span{
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space:nowrap;
        width:240px;
        height:24px;
        display:block;
    }
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }
    .button1 {
        background-color: white;
        color: black;
        border: 2px solid #4CAF50;
    }
    .button1:hover {
        background-color: #4CAF50;
        color: white;
    }

</style>

</html>
